<template>
    <div class="carousel-container flex justify-between items-center w-full relative py-10">
        <!-- 左箭头 -->
        <img src="/img/left.png" alt="Left" class="w-24 absolute left--15 top-50 cursor-pointer z-1" @click="pre"
            :class="{ 'opacity-70 cursor-not-allowed': isAtStart }" />

        <!-- 滚动内容 -->
        <div ref="scrollBox" class="hot-box flex items-center flex-1 overflow-x-auto hide-scrollbar ml-4">
            <div v-for="item in items" :key="item.id" class="hot-item flex-shrink-0 relative">
                <img :src="getImg(item.type)" alt="" class="w-30 h-30 absolute left-0">
                <img src="/img/sc_bg.png" alt="" class="w-20 h-20 absolute right-5">
                <img @click="toggleLike(item)" :src="item.like ? '/img/sc.png' : '/img/sc_un.png'" alt=""
                    class="w-14 h-14 absolute right-10 top-3">
                <img :src="item.img" :alt="item.name" class="w-100 h-100 rounded-10 ">
                <div class="color-#300808 text-14 my-5">{{ item.name }}</div>
            </div>
        </div>

        <!-- 右箭头 -->
        <img src="/img/right.png" alt="Right" class="w-24 absolute right--15 top-50 cursor-pointer z-1" @click="next"
            :class="{ 'opacity-70 cursor-not-allowed': isAtEnd }" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
    items: { id: number; img: string; name: string;like:boolean; type: string; }[]
}>()

const emit = defineEmits<{
    (e: 'update:items', value: typeof props.items): void
}>()
const getImg = (v: string) => {
    return `/img/${v}.png`
}
const scrollBox = ref<HTMLElement | null>(null)
const itemWidth = ref<number>(0)
const isAtStart = ref(true)
const isAtEnd = ref(false)
const toggleLike = (item: { id: number; }) => {
    const index = props.items.findIndex(i => i.id === item.id)
    if (index > -1) {
        const updated = [...props.items]
        updated[index] = { ...updated[index], like: !updated[index].like }
        emit('update:items', updated)
    }
}
// 获取子元素宽度
onMounted(() => {
    if (scrollBox.value && scrollBox.value.children.length > 0) {
        itemWidth.value = (scrollBox.value.children[0] as HTMLElement).offsetWidth
    }
})
// 滚动到左侧
const pre = () => {
    if (scrollBox.value && itemWidth.value) {
        const currentScrollLeft = scrollBox.value.scrollLeft
        const scrollAmount = itemWidth.value + 10

        if (currentScrollLeft <= scrollAmount) {
            scrollBox.value.scrollTo({
                left: 0,
                behavior: 'smooth'
            })
        } else {
            scrollBox.value.scrollTo({
                left: currentScrollLeft - scrollAmount,
                behavior: 'smooth'
            })
        }

        setTimeout(updateArrows, 300)
    }
}

const next = () => {
    if (scrollBox.value && itemWidth.value) {
        const currentScrollLeft = scrollBox.value.scrollLeft
        const scrollAmount = itemWidth.value + 10
        const maxScrollLeft = scrollBox.value.scrollWidth - scrollBox.value.clientWidth

        if (currentScrollLeft + scrollAmount >= maxScrollLeft - 2) {
            scrollBox.value.scrollTo({
                left: maxScrollLeft,
                behavior: 'smooth'
            })
        } else {
            scrollBox.value.scrollTo({
                left: currentScrollLeft + scrollAmount,
                behavior: 'smooth'
            })
        }

        setTimeout(updateArrows, 300)
    }
}
const updateArrows = () => {
    if (!scrollBox.value) return
    const { scrollLeft, scrollWidth, clientWidth } = scrollBox.value

    isAtStart.value = scrollLeft <= 2 // 加容差
    isAtEnd.value = scrollLeft + clientWidth >= scrollWidth - 2
}
</script>

<style scoped>
/* 隐藏滚动条（可选） */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hot-box {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* padding: 0 10px; */
    /* padding-left: 8px; */
}

.hot-item {
    flex: 0 0 auto;
    flex-shrink: 0;
    border-radius: 10px;
    width: calc(33.33% - 6px);
    text-align: center;
    background-size: 100% 100%;
    box-sizing: border-box;
    margin-right: 10px;
}

.hot-item:last-child {
    margin-right: 0;
}
</style>